<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目趋势分析</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 20px;
        }

        .modal {
            background: white;
            border-radius: 12px;
            width: 100%;
            max-width: 1000px;
            max-height: 90vh;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
            animation: modalSlideIn 0.3s ease-out;
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-20px) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .modal-header {
            padding: 24px 30px;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-title {
            display: flex;
            flex-direction: column;
        }

        .modal-title h2 {
            font-size: 20px;
            color: #1f2937;
            margin-bottom: 4px;
        }

        .modal-title p {
            font-size: 14px;
            color: #6b7280;
        }

        .close-btn {
            width: 32px;
            height: 32px;
            border: none;
            background: #f3f4f6;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .close-btn:hover {
            background: #e5e7eb;
        }

        .modal-body {
            padding: 0;
            max-height: calc(90vh - 120px);
            overflow-y: auto;
        }

        .tabs-container {
            border-bottom: 1px solid #e5e7eb;
            background: #f9fafb;
        }

        .tabs {
            display: flex;
            padding: 0 30px;
            overflow-x: auto;
        }

        .tab {
            padding: 16px 20px;
            border: none;
            background: none;
            cursor: pointer;
            font-size: 14px;
            color: #6b7280;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
            white-space: nowrap;
            position: relative;
        }

        .tab:hover {
            color: #374151;
        }

        .tab.active {
            color: #6366f1;
            border-bottom-color: #6366f1;
            background: white;
        }

        .tab-badge {
            background: #e5e7eb;
            color: #6b7280;
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 10px;
            margin-left: 8px;
        }

        .tab.active .tab-badge {
            background: #e0e7ff;
            color: #6366f1;
        }

        .chart-container {
            padding: 30px;
        }

        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }

        .chart-info h3 {
            font-size: 18px;
            color: #1f2937;
            margin-bottom: 4px;
        }

        .chart-info p {
            font-size: 14px;
            color: #6b7280;
        }

        .chart-stats {
            display: flex;
            gap: 24px;
        }

        .stat-item {
            text-align: center;
        }

        .stat-value {
            font-size: 20px;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 2px;
        }

        .stat-label {
            font-size: 12px;
            color: #6b7280;
        }

        .stat-change {
            font-size: 12px;
            margin-top: 2px;
        }

        .stat-change.positive {
            color: #10b981;
        }

        .stat-change.negative {
            color: #ef4444;
        }

        .chart-wrapper {
            background: #f9fafb;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .chart {
            width: 100%;
            height: 300px;
            position: relative;
            background: white;
            border-radius: 6px;
            border: 1px solid #e5e7eb;
        }

        .chart-canvas {
            width: 100%;
            height: 100%;
        }

        .data-points {
            display: flex;
            justify-content: space-between;
            margin-top: 16px;
            padding: 0 20px;
        }

        .data-point {
            text-align: center;
            font-size: 12px;
        }

        .data-date {
            color: #6b7280;
            margin-bottom: 4px;
        }

        .data-value {
            color: #1f2937;
            font-weight: 500;
        }

        .trend-summary {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin-top: 20px;
        }

        .summary-card {
            background: white;
            padding: 16px;
            border-radius: 8px;
            border: 1px solid #e5e7eb;
        }

        .summary-card h4 {
            font-size: 14px;
            color: #374151;
            margin-bottom: 8px;
        }

        .summary-card .value {
            font-size: 18px;
            font-weight: 600;
            color: #1f2937;
        }

        .summary-card .description {
            font-size: 12px;
            color: #6b7280;
            margin-top: 4px;
        }

        .no-data {
            text-align: center;
            padding: 60px 20px;
            color: #6b7280;
        }

        .no-data h3 {
            margin-bottom: 8px;
            color: #374151;
        }

        /* 简单的图表样式 */
        .simple-chart {
            position: relative;
            height: 300px;
            padding: 20px;
            display: flex;
            align-items: end;
            justify-content: space-between;
            background: linear-gradient(to top, #f9fafb 0%, #ffffff 100%);
        }

        .chart-bar {
            width: 20px;
            background: linear-gradient(to top, #6366f1, #8b5cf6);
            border-radius: 2px 2px 0 0;
            position: relative;
            transition: all 0.3s ease;
        }

        .chart-bar:hover {
            background: linear-gradient(to top, #4f46e5, #7c3aed);
            transform: translateY(-2px);
        }

        .chart-bar::after {
            content: attr(data-value);
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 11px;
            color: #374151;
            font-weight: 500;
        }

        .chart-line {
            position: relative;
            height: 300px;
            padding: 20px;
        }

        .line-path {
            stroke: #6366f1;
            stroke-width: 2;
            fill: none;
        }

        .line-area {
            fill: url(#gradient);
            opacity: 0.1;
        }

        .line-point {
            fill: #6366f1;
            stroke: white;
            stroke-width: 2;
            r: 4;
        }

        .line-point:hover {
            r: 6;
            fill: #4f46e5;
        }
    </style>
</head>

<body>
    <div class="modal">
        <div class="modal-header">
            <div class="modal-title">
                <h2>项目趋势分析</h2>
                <p>SEO-ABC-2024-01 - 过去15天数据走势</p>
            </div>
            <button class="close-btn" onclick="closeModal()">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>
        </div>

        <div class="modal-body">
            <div class="tabs-container">
                <div class="tabs" id="tabsContainer">
                    <!-- Tabs will be generated by JavaScript -->
                </div>
            </div>

            <div class="chart-container">
                <div class="chart-header">
                    <div class="chart-info">
                        <h3 id="chartTitle">综合外链</h3>
                        <p id="chartDescription">过去15天的进度趋势</p>
                    </div>
                    <div class="chart-stats" id="chartStats">
                        <!-- Stats will be generated by JavaScript -->
                    </div>
                </div>

                <div class="chart-wrapper">
                    <div class="chart" id="chartArea">
                        <!-- Chart will be generated by JavaScript -->
                    </div>
                </div>

                <div class="trend-summary" id="trendSummary">
                    <!-- Summary cards will be generated by JavaScript -->
                </div>
            </div>
        </div>
    </div>

    <script>
        // 模拟项目数据
        const projectData = {
            projectName: 'SEO-ABC-2024-01',
            items: [
                {
                    id: 687,
                    name: '综合外链',
                    type: 'backlinks',
                    target: 100,
                    current: 65,
                    price: 2000,
                    status: 'ACTIVE',
                    dailyData: [
                        { date: '01-10', value: 0, target: 7 },
                        { date: '01-11', value: 5, target: 14 },
                        { date: '01-12', value: 12, target: 21 },
                        { date: '01-13', value: 18, target: 28 },
                        { date: '01-14', value: 25, target: 35 },
                        { date: '01-15', value: 32, target: 42 },
                        { date: '01-16', value: 38, target: 49 },
                        { date: '01-17', value: 45, target: 56 },
                        { date: '01-18', value: 52, target: 63 },
                        { date: '01-19', value: 58, target: 70 },
                        { date: '01-20', value: 62, target: 77 },
                        { date: '01-21', value: 65, target: 84 },
                        { date: '01-22', value: 65, target: 91 },
                        { date: '01-23', value: 65, target: 98 },
                        { date: '01-24', value: 65, target: 100 }
                    ]
                },
                {
                    id: 688,
                    name: 'PR通稿',
                    type: 'pr',
                    target: 5,
                    current: 3,
                    price: 1000,
                    status: 'ACTIVE',
                    dailyData: [
                        { date: '01-10', value: 0, target: 0.3 },
                        { date: '01-11', value: 0, target: 0.6 },
                        { date: '01-12', value: 1, target: 1 },
                        { date: '01-13', value: 1, target: 1.3 },
                        { date: '01-14', value: 1, target: 1.6 },
                        { date: '01-15', value: 2, target: 2 },
                        { date: '01-16', value: 2, target: 2.3 },
                        { date: '01-17', value: 2, target: 2.6 },
                        { date: '01-18', value: 3, target: 3 },
                        { date: '01-19', value: 3, target: 3.3 },
                        { date: '01-20', value: 3, target: 3.6 },
                        { date: '01-21', value: 3, target: 4 },
                        { date: '01-22', value: 3, target: 4.3 },
                        { date: '01-23', value: 3, target: 4.6 },
                        { date: '01-24', value: 3, target: 5 }
                    ]
                },
                {
                    id: 689,
                    name: '社交媒体推广',
                    type: 'social',
                    target: 50,
                    current: 28,
                    price: 800,
                    status: 'ACTIVE',
                    dailyData: [
                        { date: '01-10', value: 0, target: 3 },
                        { date: '01-11', value: 2, target: 6 },
                        { date: '01-12', value: 5, target: 10 },
                        { date: '01-13', value: 8, target: 13 },
                        { date: '01-14', value: 12, target: 16 },
                        { date: '01-15', value: 15, target: 20 },
                        { date: '01-16', value: 18, target: 23 },
                        { date: '01-17', value: 22, target: 26 },
                        { date: '01-18', value: 25, target: 30 },
                        { date: '01-19', value: 26, target: 33 },
                        { date: '01-20', value: 27, target: 36 },
                        { date: '01-21', value: 28, target: 40 },
                        { date: '01-22', value: 28, target: 43 },
                        { date: '01-23', value: 28, target: 46 },
                        { date: '01-24', value: 28, target: 50 }
                    ]
                }
            ]
        };

        let currentItemIndex = 0;

        function initTabs() {
            const tabsContainer = document.getElementById('tabsContainer');
            tabsContainer.innerHTML = projectData.items.map((item, index) => `
                <button class="tab ${index === 0 ? 'active' : ''}" onclick="switchTab(${index})">
                    ${item.name}
                    <span class="tab-badge">${item.current}/${item.target}</span>
                </button>
            `).join('');
        }

        function switchTab(index) {
            currentItemIndex = index;
            
            // Update tab active state
            document.querySelectorAll('.tab').forEach((tab, i) => {
                tab.classList.toggle('active', i === index);
            });

            // Update chart
            updateChart();
        }

        function updateChart() {
            const item = projectData.items[currentItemIndex];
            
            // Update chart title and description
            document.getElementById('chartTitle').textContent = item.name;
            document.getElementById('chartDescription').textContent = `过去15天的进度趋势 - 目标: ${item.target}`;

            // Update stats
            const progress = Math.round((item.current / item.target) * 100);
            const lastWeekValue = item.dailyData[item.dailyData.length - 8].value;
            const weeklyChange = item.current - lastWeekValue;
            const changePercent = lastWeekValue > 0 ? Math.round((weeklyChange / lastWeekValue) * 100) : 0;

            document.getElementById('chartStats').innerHTML = `
                <div class="stat-item">
                    <div class="stat-value">${item.current}</div>
                    <div class="stat-label">当前完成</div>
                    <div class="stat-change ${weeklyChange >= 0 ? 'positive' : 'negative'}">
                        ${weeklyChange >= 0 ? '+' : ''}${weeklyChange} 本周
                    </div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">${progress}%</div>
                    <div class="stat-label">完成率</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">${item.target - item.current}</div>
                    <div class="stat-label">剩余目标</div>
                </div>
            `;

            // Generate chart
            generateChart(item);

            // Update summary
            updateSummary(item);
        }

        function generateChart(item) {
            const chartArea = document.getElementById('chartArea');
            const maxValue = Math.max(...item.dailyData.map(d => Math.max(d.value, d.target)));
            
            chartArea.innerHTML = `
                <svg class="chart-canvas" viewBox="0 0 800 300">
                    <defs>
                        <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                            <stop offset="0%" style="stop-color:#6366f1;stop-opacity:0.3" />
                            <stop offset="100%" style="stop-color:#6366f1;stop-opacity:0" />
                        </linearGradient>
                    </defs>
                    
                    <!-- Grid lines -->
                    ${[0, 1, 2, 3, 4].map(i => `
                        <line x1="60" y1="${60 + i * 48}" x2="740" y2="${60 + i * 48}" 
                              stroke="#e5e7eb" stroke-width="1" opacity="0.5"/>
                    `).join('')}
                    
                    <!-- Target line -->
                    <path d="M 60 ${260 - (item.target / maxValue) * 200} L 740 ${260 - (item.target / maxValue) * 200}" 
                          stroke="#f59e0b" stroke-width="2" stroke-dasharray="5,5" opacity="0.7"/>
                    
                    <!-- Actual progress line -->
                    <path d="M ${item.dailyData.map((d, i) => 
                        `${60 + (i * 680 / (item.dailyData.length - 1))} ${260 - (d.value / maxValue) * 200}`
                    ).join(' L ')}" 
                          class="line-path"/>
                    
                    <!-- Area under curve -->
                    <path d="M 60 260 L ${item.dailyData.map((d, i) => 
                        `${60 + (i * 680 / (item.dailyData.length - 1))} ${260 - (d.value / maxValue) * 200}`
                    ).join(' L ')} L 740 260 Z" 
                          class="line-area"/>
                    
                    <!-- Data points -->
                    ${item.dailyData.map((d, i) => `
                        <circle cx="${60 + (i * 680 / (item.dailyData.length - 1))}" 
                                cy="${260 - (d.value / maxValue) * 200}" 
                                class="line-point">
                            <title>${d.date}: ${d.value}</title>
                        </circle>
                    `).join('')}
                    
                    <!-- Y-axis labels -->
                    ${[0, 1, 2, 3, 4].map(i => `
                        <text x="50" y="${265 - i * 48}" text-anchor="end" font-size="12" fill="#6b7280">
                            ${Math.round((maxValue / 4) * i)}
                        </text>
                    `).join('')}
                    
                    <!-- X-axis labels -->
                    ${item.dailyData.filter((_, i) => i % 3 === 0).map((d, i) => `
                        <text x="${60 + (i * 3 * 680 / (item.dailyData.length - 1))}" 
                              y="285" text-anchor="middle" font-size="11" fill="#6b7280">
                            ${d.date}
                        </text>
                    `).join('')}
                </svg>
            `;
        }

        function updateSummary(item) {
            const avgDaily = item.current / item.dailyData.length;
            const remainingDays = Math.ceil((item.target - item.current) / avgDaily);
            const efficiency = Math.round((item.current / item.target) * 100);
            
            document.getElementById('trendSummary').innerHTML = `
                <div class="summary-card">
                    <h4>平均日进度</h4>
                    <div class="value">${avgDaily.toFixed(1)}</div>
                    <div class="description">每日平均完成量</div>
                </div>


                <div class="summary-card">
                    <h4>项目价值</h4>
                    <div class="value">¥${item.price}</div>
                    <div class="description">当前条目总价值</div>
                </div>
            `;
        }

        function closeModal() {
            // 在实际应用中，这里会关闭弹窗
            alert('关闭弹窗');
        }

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            initTabs();
            updateChart();
        });
    </script>
</body>

</html>